<template>
  <div>
    <div style="width:1100px;height:40px; background-color: #EEF0F4;">
      <span style="line-height:40px;font-size:15px;margin-left:22px">基本信息</span>
    </div>

    <div style="width:914px;height:60px;margin: 10px auto;border: 2px solid #EEF0F4;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="门店名称:" style="float:left;margin: 10px;">
          <el-select clearable v-model="form.storeId" placeholder="请输入优惠券名称" style="width: 160px">
            <el-option v-for="item in storeList" :key="item.storeName" :label="item.storeName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请人:" style="float:left;margin: 10px;">
          <el-input
            placeholder="请输入申请人名字"
            v-model="form.requestUser"
            clearable
            style="width:160px;"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="联系电话:" style="float:left;margin: 10px;">
          <el-input
            placeholder="请输入电话号码"
            v-model="form.phone"
            clearable
            style="width:160px;"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div style="width:1100px;height:40px; background-color: #EEF0F4;">
      <span style="line-height:40px;font-size:15px;margin-left:22px">选择商品</span>
    </div>

    <div style="width:914px;height:60px;margin: 10px auto;border: 2px solid #EEF0F4;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="sku编号:" style="float:left;margin: 10px;">
          <el-input
            placeholder="请输入商品编号"
            v-model="form.title"
            clearable
            style="width:160px;"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="商品名称:" style="float:left;margin: 10px;">
          <el-input
            placeholder="请输入商品名称"
            v-model="form.title"
            clearable
            style="width:160px;"
          >
          </el-input>
        </el-form-item>

        <!--        <el-form-item label="是否过期:" style="float:left;margin: 10px;">-->
        <!--          <el-select v-model="form.guoqi" placeholder="请选择是否过期" style="width:150px;">-->
        <!--            <el-option label="已过期" value="1"></el-option>-->
        <!--            <el-option label="未过期" value="2"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item label="品牌名称:" style="float:left;margin: 10px;">
          <el-input
            placeholder="请输入品牌名称"
            v-model="form.title"
            clearable
            style="width:160px;"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="tableData" size="mini" border stripe :header-cell-class-name="'headerBg'">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="number" label="SKU编码"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="unit" label="规格"></el-table-column>
      <!--      <el-table-column prop="commodityNum" label="分类"></el-table-column>-->
      <!--      <el-table-column prop="workUser" label="品牌"></el-table-column>-->
      <el-table-column prop="buyCount" label="可用库存"></el-table-column>
      <el-table-column prop="stock" label="总库存"></el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="90px">
        <template slot-scope="scope">
          <el-tag @click="addInPutGoods(scope.row)">加入采购单<i class="el-icon-remove-outline"></i></el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div style="width:1100px;height:40px; background-color: #EEF0F4;">
      <span style="line-height:40px;font-size:15px;margin-left:22px">采购单</span>
      <el-tag style="line-height:40px;font-size:15px;margin-left:22px" @click="save()">采购</el-tag>
    </div>

    <el-table :data="tableDataPutGoods" border stripe :header-cell-class-name="'headerBg'">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="number" label="SKU编码"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="unit" label="规格"></el-table-column>
      <el-table-column prop="buyCount" label="可用库存"></el-table-column>
      <el-table-column prop="putNumber" label="采购数量">
        <template slot-scope="scope">

          <el-input placeholder="采购数量" v-model="scope.row.putNumber"/>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" fixed="right" width="90px">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableDataPutGoods)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import {storeList,goodsList,save} from "../../api/wareHouse";
export default {
  data(){
    return{
      tableDataPutGoods: [],
      tableData:[
        // {"id":1,"brandId":1,"typeId":2,"number":"123dasdas","name":"锤子手机","unit":"个","introduce":null,"price":860,"memberPrice":850,"integral":20,"growth":40,"articleNo":"No.123","buyCount":10,"stock":1000,"stockWarning":null,"quota":2,"logistics":1,"state":true,"guarantee":1,"promotionState":false,"promotionStartTime":"2022-07-20T19:28:07","promotionEndTime":"2022-07-05T19:28:10","promotionPrice":40,"insertTime":"2022-07-05T20:08:53","modifiedTime":"2022-07-22T09:01:41","deleted":0}
        ],
      storeList:[],
      form:{
      },
      ids:[],
    }
  },
  created(){
    this.load();
  },
  methods:{
    load() {
      storeList().then(res => {
        if (res.code == 200) {
          this.storeList=res.data
        } else {
          this.$message({
            type: 'error',
            message: '未获得店铺信息'
          })
        }
      })

      goodsList().then(res => {
        if (res.code == 200) {
          this.tableData=res.data
          // console.log(JSON.stringify(res.data[0]))
        } else {
          this.$message({
            type: 'error',
            message: '未获得商品信息'
          })
        }
      })

    },
    addInPutGoods(row){

      if (this.ids.includes(row.id)){
        return this.$message.info("已加入采购单")
      }
      this.ids.push(row.id)
      this.tableDataPutGoods.push(row)
    },
    deleteRow(index, rows) {
      this.ids.splice(index)
      rows.splice(index, 1);
    },
    save(){

      // let putGood = this.tableDataPutGoods
      // let putGoods = {
      //   requestUser : this.form.requestUser,
      //   storeId : this.form.storeId,
      //   putGood : putGood,
      // }
      // this.form.mallGoods=this.tableDataPutGoods

      // console.log(this.tableDataPutGoods)
      // for (let i=0,i<this.tableDataPutGoods.length,i++)
      let putGoods=[]
      let user =JSON.parse(localStorage.getItem("userdata"))
      this.tableDataPutGoods.forEach(item=>{
        console.log(item)
        this.form={
          requestUser:this.form.requestUser,
          storeId:this.form.storeId,
          // putNumber:this.tableDataPutGoods[0].putNumber,
          putNumber:item.putNumber,
          // mallGoodsId:this.tableDataPutGoods[0].id,
          mallGoodsId:item.id,
          workUser:user.managerName
        }
        putGoods.push(this.form)
      })

      console.log(putGoods)
      save(putGoods).then(res=>{
        console.log(res)
      })
    },
  }
}
</script>
